<template>
  <div :id="id" :style="{height:height,width:width}" />
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '400px'
    },
    height: {
      type: String,
      default: '200px'
    },
    legend: {
      type: Object,
      default: () => {
        return {
          orient: 'horizontal'
        }
      }
    },
    color: {
      type: Array,
      default: () => {
        return ['#00B17D', 'red']
      }
    },
    showArea: {
      type: Boolean,
      default: false
    },
    series: {
      type: Array,
      default: () => {
        return [{
          name: 'chart',
          data: []
        }]
      }
    },
    xAxis: {
      type: Object,
      default: () => {
        return {
          showSplitLine: true,
          data: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
          axisLabel: {
            interval: 0
          }
        }
      }
    },
    yAxis: {
      type: Object,
      default: () => {
        return {
          showSplitLine: true,
          name: '(%)'
        }
      }
    },
    interval: { // X轴数据间隔度
      type: Number,
      default: 0
    },
    rotate: { // X轴数据间隔度
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      chart: null,
      option: {
        color: this.color,
        title: {
          top: 20,
          text: this.id,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 15,
            color: '#000'
          },
          left: 0
        },
        grid: { // 直角坐标系内绘图网格
          top: 80,
          width: '60%',
          bottom: '2%',
          containLabel: true // 是否隐藏x轴字段
        },
        legend: {
          tooltip: {
            show: true
          },
          orient: this.legend.orient,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: [],
          top: '50',
          right: '4%',
          textStyle: {
            fontSize: 12,
            color: this.color
          },
          formatter: (name) => {
            let clientValue = 0
            if (name === 'GPU占用') return name
            this.series.forEach(element => {
              if (element.name === name) {
                clientValue = element.data[element.data.length - 1] ? element.data[element.data.length - 1] : 0
              }
            })
            return name + ':' + clientValue + this.yAxis.name
          }
        },
        backgroundColor: '#fff',
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          interval: this.interval,
          type: 'category',
          //   name:'(时间)',
          name: this.xAxis.name,
          // nameLocation: 'start',
          nameGap: '',
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            interval: this.interval,
            rotate: this.rotate
          },
          splitLine: {
            show: this.xAxis.showSplitLine, // true || false 网格
            interval: this.interval
          },
          axisTick: { length: 5 },
          data: this.xAxis.data
        },
        yAxis: {
          type: 'value',
          name: this.yAxis.name,
          nameGap: 15,
          //   min: 0,
          //   max: 1000,
          splitNumber: 4,
          // interval: 25,
          boundaryGap: true,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              color: '#000',
              fontSize: 14,
              fontFamily: 'Microsoft YaHe'
            }
          },
          splitLine: {
            show: this.yAxis.showSplitLine, // true || false 网格
            lineStyle: {
              color: '#000'
            }
          }
        },
        series: []
      }
    }
  },
  watch: {
    xAxis: {
      deep: true,
      handler: function(newVal) {
        const length = newVal.data.length
        let interval = Math.floor(length / 6)
        interval = length % 6 === 0 ? interval - 1 : interval
        this.chart.setOption({
          xAxis: {
            ...newVal,
            axisLabel: {
              interval
            },
            splitLine: {
              interval
            }
          }
        })
      }
    },
    series: {
      deep: true,
      handler(newVal) {
        this.chart.setOption({
          series: newVal
        })
      }
    }
  },
  mounted() {
    this.series.forEach(elemet => {
      this.option.legend.data.push(elemet.name)
    })
    this.$nextTick(() => {
      this.series.forEach(element => {
        this.option.series.push({
          name: element.name,
          type: 'line',
          smooth: true,
          symbol: 'none',
          data: element.data,
          areaStyle: this.showArea ? {
            color: this.color
          } : null,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          itemStyle: {
            normal: {
            }
          }
        })
      })
      this.initChart()
    })
    window.addEventListener('resize', () => {
      if (this.chart) {
        this.chart.resize()
      }
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$el)
      this.chart.setOption(this.option)
    }
  }
}
</script>
